<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { getObjectValueReduce } from "@/components/render/util";
import request from "@/utils/request";

export default {
  name: "UnLinkage",
  // inheritAttrs: false,
  props: {
    config: Object,
  },
  data() {
    return {
      providersData: null, // API模式为返回的数据，否则为提供者组件的参数对象
    };
  },
  computed: {
    needApi() {
      return this.config.__config__.dataType === "dynamic";
    },
    provider() {
      return this.config.__config__.provider;
    },
    /* providerParamKey() {
      return this.config.__config__.providerParamKey;
    }, */

    consumer() {
      return this.config.__config__.consumer;
    },
    providersConfig() {
      return this.config.__config__.children.filter(({ __config__ }) =>
        this.provider.includes(__config__.renderKey)
      );

      // return providers.map(( { __config__ }) => __config__.defaultValue);
    },

    providersValue() {
      return this.providersConfig.map(
        ({ __config__ }) => __config__.defaultValue
      );
    },
    consumersConfig() {
      return this.config.__config__.children.filter(({ __config__ }) =>
        this.consumer.includes(__config__.renderKey)
      );
    },
  },
  created() {
    this.setValue(this.providersValue);
  },
  watch: {
    // 提供者支持多个
    providersValue: {
      handler(val) {
        this.setValue(val);
      },
      deep: true,
    },
    consumersConfig: {
      handler(val) {
        this.setConsumerValue(val);
      },
      deep: true,
    },
  },
  methods: {
    setValue(val) {
      const providersData = {};
      this.providersConfig.forEach((conf, idx) => {
        const { defaultValue, dataConsumer, providerParamKey } =
          conf.__config__;

        // 选择框、级联选择有该属性，取当前选中那项的数据
        if (dataConsumer) {
          const { props } = conf.props || {}; // 约定有 props
          for (let i = 0; i < conf[dataConsumer].length; i++) {
            const option = conf[dataConsumer][i];
            if (option[props.value || "value"] == val[idx]) {
              // providersData.push(option);
              providersData[providerParamKey] = option;
            }
          }
        } else if (defaultValue === val[idx]) {
          // providersData.push({ value: defaultValue });
          providersData[providerParamKey] = defaultValue;
        }
      });
      // 多个消费者
      if (this.needApi) {
        // 取接口信息时
        const { method, url } = this.config.__config__;
        const options = {
          method,
          url,
        };
        if (method == "get") {
          options.params = providersData;
        } else {
          options.data = providersData;
        }
        request(options).then((resp) => {
          this.providersData = resp || {};
          // 取具体某一个数据提供的信息
          this.setConsumerValue(this.consumersConfig);
        });
      } else {
        // 取具体某一个数据提供的信息
        this.providersData = providersData;
        this.setConsumerValue(this.consumersConfig);
      }
    },
    setConsumerValue(consumersConfig) {
      // 取具体某一个数据提供的信息
      consumersConfig.forEach((conf) => {
        const { providerDataKey } = conf.__config__;
        const value = getObjectValueReduce(this.providersData, providerDataKey);
        this.$set(
          conf.__config__,
          "defaultValue",
          typeof value == "object"
            ? JSON.stringify(
                getObjectValueReduce(this.providersData, providerDataKey)
              )
            : value
        );
      });
    },
  },
};
</script>

<style></style>
